<template>
  <div :class="['tree-node', bg && 'tree-node--bg']">
    <div class="tree-node__prefix"
         v-if="$slots.prefix">
      <slot name="prefix"></slot>
    </div>
    <div class="tree-node__desc">
      <slot>
        <span class="tree-node__desc--title">{{title}}</span>
        <span class="tree-node__desc--info"
              v-if="description">{{description}}</span>
      </slot>
    </div>
    <div class="tree-node__action"
         v-if="$slots.action">
      <slot name="action"></slot>
    </div>
    <div class="tree-node__suffix"
         v-if="$slots.suffix">
      <slot name="suffix"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    title: {
      type: String
    },
    description: {
      type: String
    },
    ellipsis: {
      type: [Boolean, String],
      default: 'auto'
    },
    bg: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {

    }
  },
  methods: {
    handleEdit () {

    },

    handleDelete () {

    }
  }
}
</script>

<style lang="scss" scoped>
.tree-node {
  display: flex;
  align-items: center;
  height: 48px;
  box-shadow: 0px 1px 0px 0px #f0f0f0;
  width: 100%;
  ::v-deep .tempalte-action,
  ::v-deep .account-action {
    transition: visibility 200ms;
    visibility: hidden;
  }
  &:hover {
    ::v-deep .tempalte-action,
    ::v-deep .account-action {
      visibility: visible;
    }
  }
  &--bg {
    background-color: #f5f7fa;
  }

  &__desc {
    &--info {
      padding-left: 10px;
      font-size: 12px;
      color: #bfbfbf;
    }
  }

  &__suffix {
    display: flex;
    align-items: center;
  }

  &__prefix + &__suffix,
  &__desc + &__suffix,
  &__prefix + &__action,
  &__desc + &__action {
    margin-left: auto;
  }
}
</style>
